/*
 * @Author: LinJiu BILIBILI_LinJiu@example.com
 * @Date: 2023-04-17 00:22:09
 * @LastEditors: LinJiu BILIBILI_LinJiu@example.com
 * @LastEditTime: 2023-10-13 17:38:08
 * @FilePath: \musicologist\src\pages\OnlineCoursesPage\index.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { Component } from 'react'
import Loading from "@utils/Loading";
import style from './OnlineCoursesPage.module.less'
export default class OnlineCoursesPage extends Component {
    render() {
        const courses = [
            {
                id: 1,
                title: '音乐基础课程',
                instructor: '张老师',
                description: '学习音乐的基本知识和技巧。',
            },
            {
                id: 2,
                title: '吉他入门',
                instructor: '王老师',
                description: '从零开始学习吉他弹奏。',
            },
            {
                id: 3,
                title: '钢琴弹奏技巧',
                instructor: '李老师',
                description: '提升钢琴演奏技巧的课程。',
            },
        ];
        return (
            <div className={style.online_courses_container}>
                <div className={style.music_section}>
                    <div className={style.music_content}>
                        <h2 className={style.section_title}>音乐</h2>
                        {/* 在此处添加音乐内容 */}
                    </div>
                </div>
                <div className={style.instrument_section}>
                    <h2 className={style.section_title}>乐器</h2>
                    <div className={style.instrument_cards}>
                        {courses.map(course => (
                            <div key={course.id} className={style.course_card}>
                                <h2>{course.title}</h2>
                                <p>讲师: {course.instructor}</p>
                                <p>{course.description}</p>
                                <div className={style.course_card_content}>

                                    <a href="#" className={style.course_card_button}>查看详情</a>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        )
    }
}
